<template>
  <div class="search">
    <!-- <van-nav-bar
      left-text="搜索"
      right-text=". . ."
      left-arrow
      @click-left="$router.go(-1)"
    /> -->
    <div class="header">
       <HeaderCom leftText="搜索"  :leftArrow="true" />
    </div>
    <div class="searchbox">
      <div class="inputbox">
        <van-icon name="search" size=".5333rem"/>
        <input type="text" placeholder="搜素商家、商品名称" v-model="searchval" />
      </div>
      <div class="btn" @click="goSearchList()">搜索</div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import HeaderCom from '@/components/header/headerCom.vue'
export default {
  components:{
    HeaderCom,
  },
  data(){
    return{
      searchval: this.$route.query.key || '',
      searchArr:[],
    }
  },
  methods:{
    goSearchList(){
      if( !this.searchval )return

      this.$store.commit('search_add',this.searchval)
      
      if(this.searchval === this.$route.query.key) return
      // 跳转到对应页面
      console.log(this.searchArr);
      this.$router.push({
          path:"/searchview/list",
          query:{key:this.searchval}
      })
      this.searchval = ''
    }
  }
  
};
</script>

<style scoped lang="scss">
.search{
  .searchbox{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: .2667rem .4rem;
    .inputbox{
      flex: 1;
      display: flex;
      align-items: center;
      padding: .2667rem;
      background-color: #eee;
      border-radius: .8rem;
      i{
        margin: 0 .16rem;
        color: #ccc;
      }
      input{
        font-size: .4267rem;
        border: 0;
        outline: none;
        background-color: #eee;
        
      }
        
    }
    .btn{
      width: 1.1733rem;
      height: 1.1733rem;
      margin-left: .2667rem;
      font-size: .5333rem;
      text-align: center;
      line-height: 1.1733rem;
      color: #1989fa;
    }
  }
  
}
input::-webkit-input-placeholder {
    color: #C0C0C0;
    font-size: .3733rem;
}
// input:-ms-input-placeholder {
//     color: #C0C0C0;
//     font-size: 14px;
// }
// input::-moz-placeholder {
//     color: #C0C0C0;
//     opacity: 1;
//     font-size: 14px;
// }
// input:-moz-placeholder {
//     color: #C0C0C0;
//     opacity: 1;
//     font-size: 14px;
// }
::v-deep .van-field__control{
    text-align: center;
}
::v-deep .van-button{
    height: 1.2267rem;
}
::v-deep.van-nav-bar {
  line-height: .64rem;
}
::v-deep .van-nav-bar__content {
  height: 1.28rem;
}
::v-deep .van-hairline--bottom::after{
  border-bottom: 0;
}
::v-deep .van-nav-bar__arrow {
  font-size:.5333rem;
  font-weight: 700;

}
::v-deep .van-nav-bar__text {
  font-size: .48rem;
  font-weight: 700;
  color: black;
}
::v-deep .van-nav-bar__title {
  font-size: .4267rem;
}
::v-deep .capsule{
     background-color: rgba(	rgb(233, 222, 222), 0.5);
 }
</style>